<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        #app {
            width: 1080px;
            height: 1920px;
            background-color: #333333;
            margin: 0 auto;
            border-radius: 50px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 5);
            position: relative;
        }

        #commodity {
            background-color: whitesmoke;
            width: 1070px;
            height: 1720px;
            margin: 5px auto;
            border-radius: 50px 50px 0 0;
        }

        #trolley {
            background-color: firebrick;
            width: 1070px;
            height: 200px;
            margin: 0 auto;
            border-radius: 0 0 50px 50px;
            display: flex;
        }

        .title {
            font-size: 80px;
            border-bottom: 1px solid;
            height: 150px;
            line-height: 150px;
            background-color: firebrick;
            color: whitesmoke;
            border-radius: 50px 50px 0 0;
            text-align: center;
        }

        #trolleyBt {
            width: 400px;
            height: 150px;
            font-size: 80px;
            border-radius: 50px;
            background-color: firebrick;
            color: whitesmoke;
            border: none;
            margin-top: 25px;
            margin-left: 25px;
        }

        #number {
            font-size: 40px;
            background-color: #333333;
            width: 90px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            border-radius: 50%;
            margin-left: -40px;
            color: whitesmoke;
            margin-top: 20px;
        }

        #money {
            font-size: 50px;
            color: whitesmoke;
            margin-top: 90px;
            margin-left: 100px;
        }

        #Details {
            position: absolute;
            bottom: 200px;
            margin: auto;
            height: 1150px;
            background-color: seashell;
            width: 1070px;
            color: black;
            font-size: 60px;
        }

        #Details-title {
            height: 100px;
            line-height: 100px;
            padding-left: 20px;
            margin-top: 0px;
            border-bottom: 1px solid #dddddd;
        }

        .detailsS img, #commodityDiv img {
            width: 300px;
            height: 200px;
            padding-left: 20px;
            margin-top: 10px;
        }

        .detailsS {
            margin-top: 20px;
            height: 220px;
            display: flex;
        }

        .detailsS button {
            background-color: red;
            width: 100px;
            height: 220px;
            right: 0px;
            margin-right: 20px;
            font-size: 60px;
            border: 0px;
            color: whitesmoke;
            position: absolute;
        }

        #commodityDiv {
            display: flex;
        }

        #commodityDiv button {
            background-color: red;
            width: 100px;
            height: 220px;
            right: 0px;
            margin-right: 20px;
            font-size: 60px;
            border: 0px;
            color: whitesmoke;
            position: absolute;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--  商品展示  -->
    <div id="commodity">
        <p class="title">商品</p>
        <div id="commodityDiv" style="font-size: 80px" v-for=" item in arr" :key="item.id">
            <div><img :src="item.imageUrl"></div>
            <div style="margin-left: 20px ;">
                <div>{{item.name}}</div>
                <div style="margin-top: 0px;color: red">${{item.price}}</div>
            </div>
            <div>
                <button @click="add(item)">加入</button>
            </div>
        </div>
    </div>
    <!--  购物车  -->
    <div id="trolley">
        <!--  购物车商品详情  -->
        <div id="Details" v-show="detailsStatus">
            <p id="Details-title">** 店铺</p>
            <!-- 商品展示列表 -->
            <div>
                <div v-if="details.length != 0">
                    <div @mouseover="detailsOver" @mouseout="detailsOut" class="detailsS" v-for="item in details">
                        <div><img :src="item.imageUrl"></div>
                        <div style="margin-left: 20px" v-show="detailsMov">
                            <div>{{item.name}}</div>
                            <div style="font-size: 40px">数量:{{item.number}}</div>
                            <div style="margin-top: 0px;color: red">${{item.price}}</div>
                        </div>
                        <div style="margin-left: 20px" v-show="!detailsMov">
                            <input style="margin-top: 70px;height: 100px;width: 100px;font-size: 80px" type="button"
                                   value="-" @click="item.number--">
                            <input style="height: 100px;width: 100px;font-size: 70px" type="text" v-model="item.number">
                            <input style="height: 100px;width: 100px;font-size: 80px" type="button" value="+"
                                   @click="item.number++">
                        </div>
                        <div v-show="!detailsMov">
                            <div>
                                <button @click="del(item.id)">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="details.length == 0" style="text-align: center">
                    暂无商品
                    <p style="font-size: 40px;color: darkgray">请添加商品</p>
                </div>
            </div>

        </div>
        <button id="trolleyBt" @click="DetailsShow">购物车</button>
        <div id="number">{{details.length}}</div>
        <div id="money">合计：{{details.reduce((total, item) => total + item.price * item.number, 0)}}元</div>
    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [{
                id: 1,
                name: '马卡龙',
                number: 1,
                price: 100,
                imageUrl: 'https://vcg00.cfp.cn/creative/vcg/800/new/VCG211377146607.jpg'
            },
                {
                    id: 2,
                    name: '美妆产品',
                    number: 1,
                    price: 100,
                    imageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.1omeKJQS8S8j6ZGEzZ0UIgHaE8?rs=1&pid=ImgDetMain'
                },
                {
                    id: 3,
                    name: '香皂',
                    number: 1,
                    price: 100,
                    imageUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.zDboNZDubSmjBRNvoBo1CAHaE8?rs=1&pid=ImgDetMain'
                }],
            detailsStatus: false,
            details: [],
            detailsMov: true
        },
        methods: {
            //购物车内容展示
            DetailsShow() {
                this.detailsStatus = !this.detailsStatus;
            },
            //控制选中商品的样式
            detailsOver() {
                this.detailsMov = false;
            },
            detailsOut() {
                this.detailsMov = true;
            },
            del(e) {
                this.details = this.details.filter((item) => item.id != e)
            },
            add(item) {
                // 使用 find 方法查找是否存在该数据
                let existingItem = this.details.find((existing) => existing.id === item.id);
                if (existingItem) {
                    existingItem.number++;
                } else {
                    this.details.push(item);
                }
            }
        }
    })
</script>